<template>
  <div class="recommend_container">
    <div class="container">
      <ul class="recommend_list">
        <li
          v-for="(item,index) in NewList"
          :key="index"
          class="list_item"
        >
          <p><img :src="item.picUrl" :alt="item.shareName"/></p>
          <div class="bottom_info">
            <h2 class="title">{{item.shareName}}</h2>
            <p class="desc">
              {{item.remark}}
            </p>
          </div>
        </li>
      </ul>
      <!--分页-->
      <v-pagination class="re_pagination"
                    v-if="!noData && total>=4"
                    :total="total"
                    :display='display'
                    :current-page='current'
                    :refresh='refresh'
                    @pagechange="pagechange"></v-pagination>
    </div>
  </div>
</template>
<!--suppress JSAnnotator -->
<script>
  /* eslint-disable quotes */
  import VPagination from 'common/pagination/pagination'
  export default {
    name: 'HomePopular',
    components: {
      VPagination
    },
    props: {
      List: Array
    },
    data () {
      return {
        noData: false,
        total: 0, // 总条数
        current: 1, // 当前激活页
        display: 4, // 每页显示多少条
        refresh: false, // 是否刷新（第一页激活）有搜索时需要
        NewList: [],
        MArr: []
      }
    },
    computed: {
      totalV () {
        return this.List.length
      }
    },
    methods: {
      pagechange (currentPage) {
        this.refresh = false
        this.page = {
          start: currentPage * 10,
          size: 10
        }
        this.NewList = this.MArr[currentPage - 1]
      },
      doArr () {
        this.total = this.totalV
        this.MArr = new Array(Math.ceil(this.totalV / this.display))
        for (var i = 0; i < this.MArr.length; i++) {
          this.MArr[i] = []
        }
        for (var j = 0; j < this.List.length; j++) {
          this.MArr[parseInt(j / this.display)][j % this.display] = this.List[j]
        }
        this.NewList = this.MArr[this.current - 1]
      }
    },
    mounted () {

    },
    watch: {
      List () {
      this.doArr()
      }
    }
  }
</script>
<style lang="stylus" scoped>
  .recommend_container {
    padding: 0;
    background #fff;
  }

  .recommend_list {
    overflow hidden;
    position relative;
    top: -70px;
    .list_item {
      width: 508px;
      float: left;
      margin-bottom 62px;
      &:nth-child(2n) {
        float right
      }
      & > p {
        width 100%
        height 286px;
        background #efefef
        img {
          width 100%
          height 100%;
        }
      }
      .bottom_info {
        padding 25px;
        height 164px;
        box-sizing border-box;
      }
      .title {
        font-size: 26px;
        font-weight bold;
        line-height: 42px;
        color: #000000;
        opacity: 0.9;
        overflow hidden
      }
      .desc {
        font-size: 16px;
        line-height: 36px;
        overflow hidden
        color #666;
      }
    }
  }

  .re_pagination {
    position relative;
    top: -70px;
  }
</style>
